<template>
	<view class="home">
		<view class="swiper-content">
			<view class="m-header">
				<m-header>
					<view class="home-btn">
						<button class="u-btn" @click="goShop">门店切换</button>
					</view>
				</m-header>
			</view>
			<swiper class="swiper" :indicator-dots="false" @change="swiperChange" indicator-active-color="#40C6A1"
				:autoplay="true" indicator-active-width="20rpx" indicator-color="#fff" :interval="3000"
				:duration="1000">
				<swiper-item v-for="(item,index) in storeInfo.store_slideimages" :key="index">
					<image :src="item"></image>
				</swiper-item>
			</swiper>
			<view class="pointer-list">
				<view class="pointer" v-for="(item,index) in storeInfo.store_slideimages"
					:class="{pointerActive:currentSwiper===index}" :key="index">
				</view>
			</view>
		</view>
		<view class="home-TF">
			<view class="home-TF-title">
				{{storeInfo.store_name}}
			</view>
			<view class="">
				<view class="home-TF-zb">
					<image class="home-TF-img" src="/static/images/zuobiao.png" mode=""></image>
					<text>{{storeInfo.store_address}}</text>
				</view>
				<view class="home-TF-jl">
					<image class="home-TF-img" src="/static/images/chizi.png" mode=""></image>
					<text>{{storeInfo.meter | distanceFormat}}</text>
				</view>
			</view>
		</view>
		<view class="home-tw">
			<view class="home-tw-con" @click="handleTips(0)">
				<image class="iconImage" src="../../static/images/map.png" mode=""></image>
				<text>地图导航</text>
			</view>
			<view class="home-tw-conS" @click="handleTips(1)">
				<image class="iconImage" src="../../static/images/navigation.png" mode=""></image>
				<text>图文指引</text>
			</view>
		</view>
		<view class="home-tx">
			<view class="home-tx-left">
				<image v-for='(item,index) in urls' :key="index" :src="item" mode=""></image>
				<text>{{ storeInfo.used_people_num }}人使用过</text>
			</view>
			<view class="home-tx-right">
				<image src="/static/images/tel.png" @click="makePhoneCall(storeInfo.store_mobile)" mode=""></image>
				<view style="position: relative;">
					<image src="../../static/images/wx.png" @click="" mode=""></image>
					<button open-type="contact" class="btnc"></button>
				</view>
			</view>
		</view>
		<view class="homt-xt">
		</view>
		<view class="home-classroom">
			<view class="home-classroom-title">
				<view class="home-classroom-title-xt"></view>
				<text>教室特点</text>
			</view>
			<view class="home-classroom-cons">
				<text v-for="(item,index) in storeInfo.features" :key="index">{{item.title}}</text>
			</view>
		</view>
		<view class="home-xt-one"></view>
		<view class="home-select-room">
			<view class="home-select-room-title">
				<view class="home-classroom-title-xt"></view>
				<text>选房间</text>
			</view>
			<view class="home-classroom" v-for="(item,index) in storeInfo.zzyyrooms" :key="index">
				<home-classroom :roomInfo="item"></home-classroom>
			</view>
			<no-data v-if="!storeInfo.zzyyrooms || storeInfo.zzyyrooms.length === 0"></no-data>
		</view>
		<view class="homt-xt-two"></view>
		<view class="home-shop">
			<view class="home-shop-title">
				<view class="home-shop-title-xt"></view>
				<text>门店介绍</text>
			</view>
			<view class="home-shop-con">
				<rich-text class="home-rich-text" :nodes="storeInfo.store_desciptioncontent">
				</rich-text>
				<no-data v-if="!storeInfo.store_desciptioncontent"></no-data>
			</view>
		</view>
		<m-tabbar value='0'></m-tabbar>
	</view>
</template>

<script>
	import mHeader from '@/components/header/index.vue'
	import mTabbar from '@/components/m-tabbar/index.vue'
	import {
		get_all_stores_api,
		get_stores_detail_api,
		get_stores_Appointment_time_api
	} from '@/common/api.js'
	export default {
		data() {
			return {
				systemInfo: {

				},
				storeInfo: {},
				currentSwiper: 0,
				urls: [
					'/static/images/album1.jpg',
					'/static/images/album2.jpg',
					'/static/images/album3.jpg',
					'/static/images/album4.jpg',
					'/static/images/album5.jpg',
				],
				// 左上角按钮top
				btnTop: 0,
				user_lat: null,
				user_lng: null,
				id: '',
				all_stores: [],
			};
		},
		components: {
			mHeader,
			mTabbar
		},
		watch: {
			user_lat(newValue, oldValue) {
				console.log(newValue);
				this.storeInfo.meter = this.distance(this.user_lat, this.user_lng, this.storeInfo.store_latitude, this
					.storeInfo.store_longitude)
				setTimeout(() => {
					
					if (this.all_stores.length >= 2) {
						this.all_stores = this.all_stores.map(e => {
							return {
								...e,
								meter: this.getDistance(e)
							}
						})
						this.all_stores.sort((a, b) => a.meter - b.meter)
						let nearestStore = this.all_stores[0]
						if (nearestStore.id == this.storeInfo.id) { // 最近的门店就是当前门店
						
						} else {
							let that = this
							uni.showModal({
								title: '提示有更近的门店',
								content: `有更近的门店“${nearestStore.store_name}”,是否切换？`,
								success: function(res) {
									if (res.confirm) {
										that.$u.vuex('vuex_selected_store', nearestStore.id);
										that.getStoreDetail(nearestStore.id)
									} else if (res.cancel) {
										console.log('用户点击取消');
									}
								}
							})
						}
					}

				}, 5000)
			}
		},
		onLoad() {
			uni.$on('change_store', (data) => {
				this.getStoreDetail(data.id)
			})
			
			get_all_stores_api().then(res => { //
				this.all_stores = res.data
				
				if (this.vuex_selected_store 
					&& this.all_stores.map(e => e.id).includes(this.vuex_selected_store)) { // 已经有用户选择的门店
					this.getStoreDetail(this.vuex_selected_store)
				} else { // 没有选择门店 第一个门店为显示门店, 同时保存				
					this.id = this.all_stores[0].id
					this.getStoreDetail(this.id)
					this.$u.vuex('vuex_selected_store', this.id);
				}
			})
			
			uni.getLocation({
				type: 'gcj02',
				success: (res) => {
					this.user_lat = res.latitude;
					this.user_lng = res.longitude;
					// this.getStore()
				}
			});
		},
		onShareAppMessage(res) {

		},

		methods: {
			getStoreDetail(id) {
				this.storeInfo={}
				get_stores_detail_api({
						id
					})
					.then(res => {
						const promises = res.data.zzyyrooms.map(e => {
							return get_stores_Appointment_time_api({
									roomid: e.id
								})
								.then(ress => {
									console.log(ress);
									// ress.data = JSON.parse(ress.data)
									e['time'] = ress.data
									e['min_price'] = Math.min(...ress.data.map(a => a.price))
								});
						});
						Promise.all(promises)
							.then(() => {
								res.data['meter'] = this.getDistance(res.data)
								this.storeInfo = res.data;
							})
					})

			},
			getDistance(e) {
				if (null == this.user_lat) {
					return null
				} else {
					return this.distance(this.user_lat, this.user_lng, e.store_latitude, e.store_longitude)
				}
			},
			goShop() {
				uni.navigateTo({
					url: `/pages/shopSwitching/shopSwitching?id=${this.storeInfo.id}`
				})
			},
			handleTips(type) {
				if (!type) {
					return this.openLocation(this.storeInfo.store_latitude, this.storeInfo.store_longitude, this.storeInfo
						.store_address)
				} else {
					uni.navigateTo({
						url: `/pages/openDoor/graphicGuide?id=${this.vuex_selected_store||this.id}`
					})
				}
			},
			openLocation(lat, lng, address) {
				uni.openLocation({
					latitude: parseFloat(lat),
					longitude: parseFloat(lng),
					address: address,
					success: function(res) {
						console.log(res)
					},
					fail: function(err) {
						console.log(err)
					}
				});
			},
			swiperChange({
				detail
			}) {
				this.currentSwiper = detail.current;
			}
		}
	}
</script>

<style lang="scss" scoped>
	.home {
		.m-header {
			position: absolute;
			z-index: 2;
			top: 0rpx;
			left: 0rpx;
		}

		.home-btn {
			height: 100%;
			display: flex;
			align-items: center;
			padding-left: 24rpx;

			.u-btn {
				// width: 160rpx;
				height: 58rpx;
				text-align: center;
				font-size: 28rpx;
				line-height: 58rpx;
				color: #606266;
				border-radius: 30rpx;
			}
		}

		.swiper-content {
			position: relative;

			.pointer-list {
				position: absolute;
				bottom: 48rpx;
				width: 80rpx;
				display: flex;
				justify-content: space-between;
				left: 50%;
				margin-left: -40rpx;

				.pointer {
					width: 12rpx;
					height: 12rpx;
					border-radius: 50%;
					background-color: white;
					transition: all 0.5s;

				}

				.pointerActive {
					width: 24rpx;
					border-radius: 6rpx 6rpx 6rpx 6rpx;
					background-color: #40C6A1;
				}
			}
		}
	}

	.swiper {
		height: 564rpx;

		image {
			width: 750rpx;
			height: 100%;
		}

	}

	.uni-swiper-dot uni-swiper-dot-active {
		width: 10rpx;
	}

	.uni-swiper-dot uni-swiper-dot-active {
		width: 20rpx;
	}

	.uni-swiper-dot-active {
		width: 20rpx !important;
	}

	.home-TF {
		box-sizing: border-box;
		padding: 32rpx 24rpx 0rpx;

		.home-TF-title {
			font-size: 36rpx;
			color: #303133 100%;
			font-family: PingFang SC-Medium, PingFang SC;
		}

		.home-TF-zb {
			display: flex;
			align-items: center;
			margin-top: 16rpx;
			margin-bottom: 20rpx;

			.home-TF-img {
				width: 31rpx;
				height: 31rpx;
				margin-right: 16rpx;
			}

			text {
				font-size: 28rpx;

				color: #606266;
			}
		}

		.home-TF-jl {
			display: flex;
			align-items: center;
			margin-top: 16rpx;
			margin-bottom: 24rpx;

			.home-TF-img {
				width: 31rpx;
				height: 31rpx;
				margin-right: 16rpx;
			}

			text {
				font-size: 28rpx;

				color: #606266;
			}

		}



	}

	.home-tw {
		display: flex;
		justify-content: space-around;

		.home-tw-con {
			display: flex;
			width: 339rpx;
			height: 118rpx;
			border-radius: 24rpx 24rpx 24rpx 24rpx;
			background: rgba(17, 164, 123, 0.7);
			line-height: 118rpx;
			background-image: url('/static/images/locationBg.png');
			background-size: cover;
			background-repeat: no-repeat;

			image {
				margin-left: 46rpx;
				margin-right: 24rpx;
				margin-top: 26rpx;
				width: 64rpx;
				height: 64rpx;
			}

			text {
				font-size: 36rpx;
				font-weight: 500;
				color: #FFFFFF;
			}
		}

		.home-tw-conS {
			display: flex;
			width: 339rpx;
			height: 118rpx;
			border-radius: 24rpx 24rpx 24rpx 24rpx;
			background: rgba(17, 164, 123, 0.7);
			line-height: 118rpx;
			background-image: url('/static/images//guideBg.png');
			background-size: cover;
			background-repeat: no-repeat;

			image {
				margin-left: 46rpx;
				margin-right: 24rpx;
				margin-top: 26rpx;
				width: 64rpx;
				height: 64rpx;
			}

			text {
				font-size: 36rpx;
				font-weight: 500;
				color: #FFFFFF;
			}
		}
	}

	.home-tx {
		margin: 34rpx 0 0 29rpx;
		display: flex;
		justify-content: space-between;
		box-sizing: border-box;
		padding: 0 21rpx;
		align-items: center;

		.home-tx-left {
			display: flex;
			align-items: center;

			image {
				width: 64rpx;
				height: 64rpx;
				border-radius: 50%;
				border: 4rpx solid #F3F4F6;
				margin-left: -30rpx;

			}

			text {
				font-size: 28rpx;

				color: #606266;
				margin-left: 16rpx;
			}
		}

		.home-tx-right {
			display: flex;

			image {
				width: 64rpx;
				height: 64rpx;
			}

			image:nth-child(1) {
				margin-right: 32rpx;
			}
		}

	}

	.homt-xt {
		margin: 30rpx 0 24rpx 0;
		border-bottom: 8rpx solid #F3F4F6;
	}

	.home-classroom {
		box-sizing: border-box;
		padding: 0 24rpx;

		.home-classroom-title {
			display: flex;
			align-items: center;
			margin-bottom: 24rpx;

			.home-classroom-title-xt {
				width: 12rpx;
				height: 32rpx;
				margin-right: 16rpx;
				background: #40C6A1;
			}

			text {
				font-size: 36rpx;
				color: #303133 100%;
				font-weight: 500;
			}
		}

		.home-classroom-cons {
			display: flex;
			flex-wrap: wrap;

			text {
				max-width: max-content;
				padding: 12rpx;
				color: #606266;
				font-size: 28rpx;
				margin: 0 24rpx 24rpx 0;
				border-radius: 4rpx 4rpx 4rpx 4rpx;
				border: 2rpx solid rgba(64, 198, 161, 0.67);
			}
		}
	}

	.home-xt-one {
		margin: 0rpx 0 24rpx 0;
		border-bottom: 8rpx solid #F3F4F6;
	}

	.home-select-room {
		.home-select-room-title {
			display: flex;
			align-items: center;
			box-sizing: border-box;
			padding: 0 24rpx 24rpx 24rpx;

			.home-classroom-title-xt {
				width: 12rpx;
				height: 32rpx;
				margin-right: 16rpx;
				background: #40C6A1;
			}

			text {
				font-size: 36rpx;
				color: #303133 100%;
				font-weight: 500;
			}
		}



	}

	.homt-xt-two {
		margin: 24rpx 0 24rpx 0;
		border-bottom: 8rpx solid #F3F4F6;
	}

	.home-shop {
		box-sizing: border-box;
		padding: 0 24rpx;

		.home-shop-title {
			display: flex;
			align-items: center;
			margin-bottom: 24rpx;

			.home-shop-title-xt {
				width: 12rpx;
				height: 32rpx;
				margin-right: 16rpx;
				background: #40C6A1;
			}

			text {
				font-size: 36rpx;
				color: #303133 100%;
				font-weight: 500;
			}
		}

		.home-shop-con {
			padding-bottom: 68rpx;

			.home-rich-text {
				color: #606266;
				line-height: 50rpx;
				font-size: 28rpx;
			}
		}
	}

	.btnc {
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		position: absolute;
		border: none;
		z-index: 55;
		background-color: transparent;
		padding: 0;

		&::after {
			border: none;
		}
	}
</style>